<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>工作很累，从遥远的地方带给您温馨问候</title>
</head>
<link rel="stylesheet" href="js/layui/css/zaoanwanan.css">
<script src="js/layui/js/zaoanwanan/jquery.min.js"></script>
<script src="js/layui/js/zaoanwanan/prefixfree.min.js"></script>

</head>
<body>

<div class="container-wrapper">

    <h1>早上好，晚安</h1>
    <p id="subtitle">点击太阳/月亮动画切换</p>

    <div class="container">

        <div class="circle-container">
            <div class="sky">
                <div class="sky-night">
                    <div class="stars">
                        <div class="shooting-star"></div>
                        <div class="star-group-1"></div>
                        <div class="star-group-2"></div>
                        <div class="star-group-3"></div>
                        <div class="star-group-4"></div>
                    </div>

                </div>
                <div class="cloud cloud-1"></div>
                <div class="cloud cloud-2"></div>
                <div class="cloud cloud-3"></div>
                <div class="cloud cloud-4"></div>
                <div class="cloud cloud-5"></div>
                <div class="cloud cloud-6"></div>
                <div class="bird bird-1"></div>
                <div class="bird bird-2"></div>
                <div class="bird bird-3"></div>

            </div>

            <div class="mountains">
                <div class="mountain-back">
                    <div class="mountain-back-1"></div>
                    <div class="mountain-back-2"></div>
                </div>
                <div class="mountain-middle">
                    <div class="mountain-middle-1"></div>
                    <div class="mountain-middle-2"></div>
                </div>
                <div class="mountain-top">
                    <div class="mountain-top-1"></div>
                </div>
            </div>

            <div class="sun-container">
                <div class="sun"></div>
            </div>

            <div class="ocean">
                <div class="boat"></div>
                <div class="ocean-night">

                    <div class="moon"></div>

                    <div class="mountains mountains-bottom">
                        <div class="mountain-back">
                            <div class="mountain-back-1"></div>
                            <div class="mountain-back-2"></div>
                        </div>
                        <div class="mountain-middle">
                            <div class="mountain-middle-1"></div>
                            <div class="mountain-middle-2"></div>
                        </div>
                        <div class="mountain-top">
                            <div class="mountain-top-1"></div>
                        </div>
                    </div>

                </div>
            </div>

        </div>

    </div>


</div>


<!--<script src="js/script.js"></script>-->

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    <p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
    <p>来源：<a href="http://www.a5xiazai.com/" target="_blank">A5源码</a></p>
</div>
</body>
</html>